<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="./css/style.min.css">
    <title>我的优惠券</title>
    <style>
    body{ 
        -webkit-touch-callout:none;
        -moz-touch-callout:none;
        -ms-touch-callout:none;
        touch-callout:none;
        -webkit-user-select: none;
        user-select: none;
  }
       
    </style>
</head>
<script type="text/javascript">
    window.onload=function () {
            document.addEventListener('touchstart',function (event) {
                if(event.touches.length>1){
                    event.preventDefault();
                }
            })
            var lastTouchEnd=0;
            document.addEventListener('touchend',function (event) {
                var now=(new Date()).getTime();
                if(now-lastTouchEnd<=300){
                    event.preventDefault();
                }
                lastTouchEnd=now;
            },false)
        }
</script>

<body class="cmc-body">
    <div id="personal_center">
        <div class="t-container">
            <header class="cl" v-show="header.show">
                <div class="nav-bar cl">
                    <span class="goback arrow_l" @click="goback"></span>
                    <span class="page-name" v-cloak>我的优惠券</span>
                </div>
            </header>
            <div v-html="html">

            </div>
            <div class="t-main">
                <div class="t-order-tab">
                    <div class="t-order-tab-ul">
                        <div class="tab-slide cmc-tab-slide" v-for="(item,$index) in tabs">
                            <a  href="javascript:void(0);" @click="choose($index,item.status);" :class="{'t-order-tab-ul-li':$index===selected}">
                                <span class="tabs-span" v-cloak>{{item.tabName}}<i class="t-corner" v-show="item.leng > 0">{{item.leng}}</i></span>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="t-whole-main" v-if="selected == 0 || selected == 1 || selected == 2 || selected == 3" v-cloak>
                    <div class="t-whole-goods-item t-cmc-goods-item" v-for="(item,$index) in list">
                        <div class="t-gap-box"></div>
                        <div @click="withdraw(item,$index)" class="couItemA" :data_id="item.id" :data_index="$index">
                            <div class="t-whole-content t-cmc-w-content">
                                <div class="t-whole-pic t-cmc-pic  " :class="[{'t-cash-coupon':item.status == 1 && item.type == 2},{'t-cash-coupon':item.status == 1 && item.type == 1},{'t-self-support':item.status == 1 && item.type == 11},{'t-already-use':item.status != 1}]">
                                    <p class="t-expire" v-if="item.status == 1 && item.expireDay <= 3"><code class="e-icon">即将过期</code></p>
                                    <p>￥<span class="t-ss-big">{{item.amount}}</span></p>
                                    <p><span class="t-ss-small" v-if="item.type == 1">满{{item.conditionAmount}}可用</span></p>
                                </div>
                                <div class="t-box-flex t-cmc-box">
                                    <!-- <p class="t-cmc-title"  v-if="item.status == 1 && item.type == 2">代金券</p>
                                    <p class="t-cmc-title t-y-cmc-title" v-if="item.status == 1 && item.type == 1">满减券</p>
                                    <p class="t-cmc-title t-b-cmc-title"  v-if="item.status != 1 && item.type == 2">代金券</p>
                                    <p class="t-cmc-title t-b-cmc-title" v-if="item.status != 1 && item.type == 1">满减券</p> -->
                                    <strong v-cloak><span>{{item.code}}</span></strong>
                                    <p style="color: #999;font-size: 12px;">{{item.subTitle}}</p>
                                    <p>
                                        <span v-cloak>{{item.useStartTime.substring(0,10)}}至{{item.useEndTime.substring(0,10)}}</span>
                                    </p>
                                </div>
                                <div class="t-box-right" v-if="item.status == 1">
                                   <button type="button" class="t-self-support-btn" :class="[{'t-self-support-btn':item.type == 1},{'t-cash-coupon-btn':item.type == 11}]" >立即使用</button>
                                   <!-- <button href="javascript:void(0)" class="t-cmc-del" @click="deleteCoupon($index,item.id)">删除</button> -->
                                </div>
                                <div class="t-box-right t-au-box-right" v-if="item.status == 2">
                                    <i></i>
                                </div>
                                <div class="t-box-right t-expired-right" v-if="item.status == 3">
                                    <i></i>
                                </div>
                                <div class="t-box-right t-deleted-right" v-if="item.status == 4">
                                    <i></i>
                                    <button  class="t-deleted-btn" v-if="item.status == 4" >撤回优惠券</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <p class="loading-tip" v-cloak>{{loading_tip}}</p>
            </div>
        </div>
        <confirm ref="confirm"></confirm>
        <toast ref="toast" style="z-index: 20001;"></toast>
        <alerts ref="alerts"></alerts>
    </div>
    <script src="./js/lib/vue.js"></script>
    <script src="./js/lib/zepto.min.js"></script>
    <script src="http://static.jdhui.com/lib/vue-resource/1.2/vue-resource.js"></script>
    <script src="./js/min/config.min.js"></script>
    <script src="./js/min/common.min.js"></script>
    <script src="./js/min/component.min.js"></script>

    <script>
        var timer;
        var startX = 0,
            startY = 0,
            endX = 0,
            endY = 0;
        var toast = component.popup.toast(),
            confirm = component.popup.confirm({
                name: 'confirm',
                type: 'confirm'
            }),
            alerts = component.popup.confirm({
                name: 'alert',
                type: 'alert'
            });
        var app = new Vue({
            el: '#personal_center',
            data: function() {
                return {
                    header: {
                        show: !APP.iswechat()
                    },
                    list: [],
                    status: APP.getQueryString('status') || '1',
                    isloading: false,
                    page: 0,
                    loading_tip: '数据加载中',
                    store_id: APP.getQueryString('storeid'),
 
                    html: '',
                    tabs: [{
                        tabName: '可使用',
                        status: 1,
                        leng: 0
                    }, {
                        tabName: '已使用',
                        status: 2,
                        leng: 0
                    }, {
                        tabName: '已过期',
                        status: 3,
                        leng: 0
                    }, {
                        tabName: '回收站',
                        status: 4,
                        leng: 0
                    }],
                    selected: APP.getQueryString('status') == '1' ? 0 : (APP.getQueryString('status') == '2' ? 1 : (APP.getQueryString('status') == '3' ? 2 : (APP.getQueryString('status') == '4'? 3 : 0))),
                    keyword: '',
                    startTime: '',
                    endTime: '',
                    shop_name: '',
                    member_id: ''
                }
            },
            mounted: function() {
                APP.init(this, function() {
                    this.shop_name = APP.getCookie('shopname');
                    this.member_id = APP.getCookie('memberid');
                }.bind(this), function(arg) {
                    this.shop_name = arg.body.data.shop.shop_name;
                    this.member_id = arg.body.data.member.member_id;
                }.bind(this));
                this.getData();
                window.addEventListener('scroll', this.scrollLoading);
                var that = this;
                //长按弹出删除提示框
                if(that.status == 1){
                    $('body').on('touchstart', '.couItemA', function(e) {
                        var id = $(this).attr('data_id');
                        var index = $(this).attr('data_index');

                        var touch = e.touches[0]; 
                        startX = Number(touch.pageX);
                        startY = Number(touch.pageY);
                        endX = startX;
                        endY = startY;

                        
                        timer = setTimeout(function() {
                            if(Math.abs(endY - startY) < 2 && Math.abs(endX - startX) < 2) {
                                that.confirmCoupon(id,index);
                            }
                            clearTimeout(timer);
                        }, 500);
                    })
                    $('body').on('touchmove', '.t-whole-goods-item',function(e) {
                        var touch = e.touches[0]; 
                        endX = Number(touch.pageX);
                        endY = Number(touch.pageY);
                    })
                    $('body').on('touchend', '.t-whole-goods-item', function(e) {
                        clearTimeout(timer);
                    })
                     $('body').on('touchcancel', '.t-whole-goods-item', function(e) {
                        clearTimeout(timer);
                    })
                }
            },
            destroyed: function() {
                window.removeEventListener('scroll', this.scrollLoading);
            },
            components: {
                'toast': toast,
                'confirm': confirm,
                'alerts': alerts
            },
            methods: {
                goback: function() {
                    //window.history.go(-1);
                    window.location.href = 'personal-center.html?storeid=' + this.store_id;
                },
                getData: function() {
                    this.page++;
                    this.isloading = true;
                    if(this.selected == 0 || this.selected == 1 || this.selected == 2 || this.selected == 3){
                        Vue.http.post(YHQJAVA + 'wap/receive/myCoupon',{
                            type:'',
                            pageIndex:this.page,
                            pageSize:10,
                            status:this.selected == 0 ? 1 : this.selected == 1 ? 2 : this.selected == 2 ? 3 : this.selected == 3 ? 4 : 0,
                            memberId:this.member_id,
                            shopId:this.store_id 

                        },{
                            emulateJSON: true 
                        }).then(function(_res){
                            this.isloading = false;
                            var _data = _res.body;
                            if(_data.code == 1){
                                this.list = this.list.concat(_data.obj.list);
                                // _data.obj.list.forEach(function(v,k){
                                //     this.status = v.status;
                                // }.bind(this));
                                if(_data.obj.list.length < 10){
                                    this.loading_tip = '没有更多数据';
                                    setTimeout(function() {
                                        window.removeEventListener('scroll', this.scrollLoading);
                                    }.bind(this), 100);
                                }else{
                                    this.loading_tip = '加载更多数据';
                                }
                            }
                        }.bind(this),function(err){
                            this.isloading = false;
                        }.bind(this))
                    }

                },
                scrollLoading: function() {
                    if (this.isloading) return;
                    if (document.body.scrollHeight - document.body.scrollTop - window.innerHeight < 150) {
                        this.getData();
                    }
                },
               
                choose: function(index, s) {
                    this.selected = index;
                    this.status = s;
                    window.location.href = "c-my-coupon.html?storeid=" + this.store_id + '&status=' + this.status;
                },
                confirmCoupon:function(id,index){
                    this.$refs.confirm.show({
                        title:'确定要删除吗?',
                        content:'删除后可去回收站恢复我的优惠券',
                        confirm:function(){
                            Vue.http.post(YHQJAVA +  'shop/receive/throwCoupon',{
                                couponId:id,
                                source:'wap'
                            },{
                                emulateJSON: true 
                            }).then(function(_res){
                                var _data = _res.body;
                                if(_data.code == 1){
                                    this.$refs.toast.show("删除优惠券成功!");
                                    setTimeout(function(){
                                    window.location.href = "c-my-coupon.html?storeid=" + this.store_id + '&status=' + this.status;
                                    }.bind(this),1000)
                                }else{
                                    this.$refs.toast.show(_data.message);
                                }
                                }.bind(this),function(err){

                                }.bind(this))
                        }.bind(this)
                    })
                },
                deleteCoupon:function(index,id){
                    Vue.http.post(YHQJAVA +  'shop/receive/throwCoupon',{
                        couponId:id
                    },{
                       emulateJSON: true 
                   }).then(function(_res){
                       var _data = _res.body;
                        if(_data.code == 1){
                            this.$refs.toast.show("删除优惠券成功!");
                            setTimeout(function(){
                                 window.location.href = "c-my-coupon.html?storeid=" + this.store_id + '&status=' + this.status;
                            }.bind(this),1000)
                        }else{
                            this.$refs.toast.show(_data.message);
                        }
                   }.bind(this),function(err){

                   }.bind(this))
                },
                withdraw:function(item,index){
                    //可用优惠券跳转
                    // var dateNow=new Date().getTime();
                    // var dateStart=new Date(item.useStartTime).getTime();
                    var tmpStart=item.useStartTime;
                    var dateNow=new Date();
                    var dateStart=new Date(tmpStart.replace(/-/g,"/"));
                    // var dateStart=item.useStartTime;
                    if(this.status == 1){
                        if (dateNow-dateStart>=0) {
                           window.location.href = 'coupon-goods-list.html?storeid='+ this.store_id + '&sType=' + item.sType + '&gType='+ item.gType + '&Gdata=' + item.gData; 
                       }else{
                        this.$refs.toast.show("该优惠劵未到使用时间!");
                       }
                        
                    }
                    //撤回优惠券
                    if(this.status == 4){
                       Vue.http.post(YHQJAVA + 'shop/receive/restore',{
                        couponId:item.id,
                        source:'wap'
                        },{
                            emulateJSON: true
                        }).then(function(_res){
                            var _data = _res.body;
                            if(_data.code = 1){
                                this.$refs.toast.show("撤回优惠券成功!");
                                 setTimeout(function(){
                                    window.location.href= "c-my-coupon.html?storeid=" + this.store_id + '&status=' + this.status;
                                }.bind(this),1000)
                            }else{
                                this.$refs.toast.show(_data.message);
                            }
                        }.bind(this),function(err){

                        }) 
                    }
                    
                }
            }
        })
    </script>
</body>

</html>